<template>
  <div class="app-container">
    <!-- 患者信息查询条件开始 -->
    <el-card class="box-card">
      <el-form ref="queryForm" :inline="true" :model="patientParams" label-width="70">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="身份证号" porp="idCard">
              <el-input v-model="patientParams.idCard" placeholder="请输入患者身份证号" clearable size="small" style="width: 520px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="handleIdCardQuery">加载身份证号</el-button>
              <el-button type="warning" icon="el-icon-search" size="mini" @click="handleIdCardQuery">加载患者信息</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <!-- 患者信息查询条件结束 -->
    <!-- 患者信息展示开始 -->
    <el-card class="box-card">
      <el-form ref="form" :rules="rules" :model="patient" :inline="true" label-width="88px">
        <el-form-item label="身份证号" prop="idCard">
          <el-input v-model="patient.idCard" placeholder="请输入身份证号" clearable size="small" style="width: 200px;" />
        </el-form-item>

        <el-form-item label="患者姓名" prop="name">
          <el-input v-model="patient.name" placeholder="请输入患者姓名" clearable size="small" style="width: 200px;" />
        </el-form-item>

        <el-form-item label="患者电话" prop="phone">
          <el-input v-model="patient.phone" placeholder="请输入患者电话" clearable size="small" style="width: 200px;" />
        </el-form-item>

        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="patient.sex">
            <el-radio v-for="sex in sexOptions" :key="sex.dictValue" :label="sex.dictValue" :value="sex.dictValue">
              {{ sex.dictLabel }}
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker v-model="patient.birthday" size="small" style="width: 200px;" value-format="yyyy-MM-dd" type="date" />
        </el-form-item>

        <el-form-item label="患者年龄" prop="age">
          <el-input v-model="patient.age" placeholder="请输入患者年龄" clearable size="small" style="width: 200px;" :readonly="true" />
        </el-form-item>

        <el-form-item label="地址信息" prop="address">
          <el-input v-model="patient.address" placeholder="请输入地址信息" clearable size="small" style="width: 200px;" />
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 患者信息展示结束 -->
    <!-- 挂号项目栏开始 -->
    <el-card class="box-card">
      <el-row>
        <el-col :span="12">
          <el-radio-group v-model="queryDeptParams.regItemId" @change="registeredItemChange">
            <el-radio-button
              v-for="regItem in regItemOptions"
              :key="regItem.regItemId"
              :value="regItem.regItemId"
              :label="regItem.regItemId"
            >{{ regItem.regItemName }}</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="12">
          <div style="float: right;">
            <span style="margin-left: 12px;">
              挂号费:￥{{ queryDeptParams.regItemAmount }}
            </span>
            <el-button type="danger" icon="el-icon-search" :disabled="single" size="small" @click="handleRegistration">挂号收费</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 挂号项目栏结束 -->

    <!-- 可以挂号科室数据表格开始 -->
    <el-card>
      <!-- 科室查询条件开始 -->
      <el-form ref="queryDeptForm" :model="queryDeptParams" :inline="true" label-width="68px">
        <el-form-item label="所属科室" prop="deptId">
          <el-select v-model="queryDeptParams.deptId" placeholder="请选择所属科室" clearable size="small" style="width: 200px;">
            <el-option v-for="dept in deptOptions" :key="dept.deptId" :label="dept.deptName" :value="dept.deptId" />
          </el-select>
        </el-form-item>

        <el-form-item label="挂号类型" prop="schdulingType">
          <el-select v-model="queryDeptParams.schedulingType" placeholder="请选择挂号类型" clearable size="small" style="width: 200px;">
            <el-option
              v-for="schdulingType in schedulingTypeOptions"
              :key="schdulingType.dictValue"
              :label="schdulingType.dictLabel"
              :value="schdulingType.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="挂号时段" prop="subsectionType">
          <el-select v-model="queryDeptParams.subsectionType" placeholder="请选择挂号时段" clearable size="small" style="width: 200px;">
            <el-option
              v-for="subsectionType in subsectionTypeOptions"
              :key="subsectionType.dictValue"
              :label="subsectionType.dictLabel"
              :value="subsectionType.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="挂号时间" prop="schedulingDay">
          <el-date-picker
            v-model="queryDeptParams.schedulingDay"
            size="small"
            style="width: 240px;"
            value-format="yyyy-MM-dd"
            type="date"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleDeptQuery">搜索</el-button>
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetDeptQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 科室查询条件结束 -->

      <!-- 科室数据表格开始 -->
      <el-table v-loading="loading" border :data="deptTableList" highlight-current-row @selection-change="handleSelectChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="科室id" align="center" prop="deptId" />
        <el-table-column label="科室名称" align="center" prop="deptName" />
        <el-table-column label="当前号数" align="center" prop="regNumber" />
      </el-table>
      <!-- 科室数据表格结束 -->
    </el-card>
    <!-- 可以挂号科室数据表格结束 -->

  </div>
</template>

<script>
import {
  getPatientByIdCard,
  listDeptForScheduling,
  addRegistration,
  collectFee
} from '@/api/doctor/registration'
import {
  selectAllDept
} from '@/api/system/dept'
import {
  selectAllRegisteredItem
} from '@/api/system/registeredItem'
export default {
  data() {
    return {
      // 非选中单个禁用 选中单个启用
      single: true,
      // 多选时选中的部门id
      ids: [],
      // 加载遮罩
      loading: false,
      // 查询参数
      patientParams: {},
      // 患者信息展示
      patient: {
        sex: '2'
      },
      // 性别列表
      sexOptions: [],
      // 科室列表
      deptOptions: [],
      // 排班类型列表 门诊、急诊
      schedulingTypeOptions: [],
      // 排班时间段列表
      subsectionTypeOptions: [],
      // 挂号项目
      regItemOptions: [],
      // 查询可以挂号科室的条件
      queryDeptParams: {
        // 挂号项目id
        regItemId: 1,
        // 挂号费
        regItemAmount: undefined,
        // 所属科室
        deptId: '',
        // 挂号类型
        schedulingType: '1',
        // 挂号时段
        subsectionType: undefined,
        // 挂号日期
        schedulingDay: this.moment(new Date()).format('YYYY-MM-DD')
      },
      // 可以挂号科室的信息
      deptTableList: [],
      // 表单校验规则
      rules: {
        name: [{
          required: true,
          message: '患者姓名不能为空',
          trigger: 'blur'
        }],
        phone: [{
          required: true,
          message: '手机号不能为空',
          trigger: 'blur'
        },
        {
          pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/,
          message: '请输入正确的手机号',
          trigger: 'blur'
        }
        ],
        idCard: [{
          required: true,
          message: '身份证号不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  // 监听patient出生日期变化年龄也随之变化
  watch: {
    patient: {
      handler: function() {
        if (this.patient.birthday !== undefined) {
          this.patient.age = this.getAge(this.patient.birthday.substring(0, 10))
        }
      },
      // 开启深度监听
      deep: true
    }
  },
  created() {
    // 查询性别
    this.getDataByType('sys_user_sex').then(res => {
      this.sexOptions = res.data
    })
    // 查询科室列表
    selectAllDept().then(res => {
      this.deptOptions = res.data
    })
    // 排班类型列表
    this.getDataByType('his_scheduling_type').then(res => {
      this.schedulingTypeOptions = res.data
    })
    // 排班时间段列表
    this.getDataByType('his_subsection_type').then(res => {
      this.subsectionTypeOptions = res.data
    })
    // 查询挂号项目
    selectAllRegisteredItem().then(res => {
      this.regItemOptions = res.data
      this.queryDeptParams.regItemId = this.regItemOptions[0].regItemId
      this.queryDeptParams.regItemAmount = this.regItemOptions[0].regItemFee
    })
    // 加载科室数据
    this.getDeptForScheduling()
    // 获取当前时间段
    const subsectionType = this.getCurrentTimeType()
    this.queryDeptParams.subsectionType = subsectionType
  },
  methods: {
    // 加载科室数据
    getDeptForScheduling() {
      this.loading = true
      listDeptForScheduling(this.queryDeptParams).then(res => {
        this.loading = false
        this.deptTableList = res.data
      })
    },
    // 根据身份证号加载患者信息
    handleIdCardQuery() {
      if (this.patientParams.idCard === undefined) {
        this.msgError('请输入要查询的身份证号')
      } else {
        this.loading = true
        getPatientByIdCard(this.patientParams.idCard).then(res => {
          this.loading = false
          this.patient = res.data
          this.patient.age = this.getAge(this.patient.birthday.substring(0, 10))
        }).catch(() => {
          this.loading = false
          this.patient = {
            sex: '2'
          }
        })
      }
    },
    // 挂号项修改时触发
    registeredItemChange(id) {
      // console.log(id)
      // 遍历挂号项目集合
      this.regItemOptions.filter(item => {
        if (id === item.regItemId) {
          this.queryDeptParams.regItemAmount = item.regItemFee
        }
      })

      // 门诊和急诊切换
      if (id === 1 || id === 2) {
        this.queryDeptParams.schedulingType = '1'
      } else {
        this.queryDeptParams.schedulingType = '2'
      }
      this.getDeptForScheduling()
    },
    // 挂号收费
    handleRegistration() {
      const tx = this
      // 表单数据校验
      tx.$refs['form'].validate(valid => {
        if (valid) {
          tx.$confirm('是否确认给【' + this.patient.name + '】进行挂号?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal: false,
            type: 'waring',
            center: true
          }).then(() => {
            // 获取要挂号的科室
            const deptId = this.ids[0]
            // 组装要提交到后台的数据
            const data = {
              'patientDto': tx.patient, 'registrationDto': {
                deptId: deptId,
                registrationItemId: tx.queryDeptParams.regItemId,
                registrationAmount: tx.queryDeptParams.regItemAmount,
                visitDate: this.moment(tx.queryDeptParams.schedulingDay).format('YYYY-MM-DD'),
                schedulingType: tx.queryDeptParams.schedulingType,
                subsectionType: tx.queryDeptParams.subsectionType
              }}
            // 添加挂号信息到数据库
            addRegistration(data).then(res => {
              this.msgSuccess('挂号成功')
              // 接收挂号单id
              const regId = res.data
              // 清空页面上的数据
              this.resetDeptQuery()
              this.patient = { sex: '2' }
              tx.$confirm('是否确认给挂号ID为【' + regId + '】的挂号收费?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                closeOnClickModal: false,
                type: 'waring',
                center: true
              }).then(() => {
                // 收费
                collectFee(regId).then(res => {
                  this.msgSuccess('收费成功')
                  // 刷新页面
                  this.getDeptForScheduling()
                }).catch(() => {
                  this.msgError('收费失败')
                })
              }).catch(() => {
                this.msgError('收费已取消')
              })
            }).catch(() => {
              this.msgError('挂号失败')
            })
          }).catch(() => {
            this.msgError('挂号已取消')
          })
        }
      })
    },
    // 科室搜索
    handleDeptQuery() {
      this.getDeptForScheduling()
    },
    // 科室搜索重置
    resetDeptQuery() {
      this.resetForm('queryDeptForm')
      this.queryDeptParams.schedulingType = '1'
      this.queryDeptParams.schedulingDay = this.moment(new Date()).format('YYYY-MM-DD')
      this.queryDeptParams.regItemId = '1'
      // 属性
      this.getDeptForScheduling()
    },
    // 科室多选时触发
    handleSelectChange(selection) {
      this.ids = selection.map(item => item.deptId)
      this.single = selection.length !== 1
    }
  }
}
</script>

<style scoped>
  .box-card {
    padding: 0px;
    margin: 0px;
    margin-bottom: 8px;
  }
</style>
